<!DOCTYPE html>
<html lang="ES-es">

	<head>
		<meta charset="UTF-8">
		<title> META BUSCADOR EMPLEO</title>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="./css/jquery.mobile.css" />

		<script src="./js/jquery.js"></script>
		<script src="./js/jquery.mobile.js"></script>
		<script src="./js/bd.js"></script>
		<script src="./js/Iberempleos.js"></script>
		<script src="./js/JTalent.js"></script>
		<script src="./js/filtros.js"></script>
		<script src="./js/JobRapido.js"></script>
		<script src="./js/Infojobs.js"></script>

	</head>

	<body>

		<div data-role="page" id="pageprincipal">

			<div data-role="header" id="principalheader">

				<h1> META BUSCADOR EMPLEO</h1>
				<a href="#pagefiltros" data-role="button" data-icon="arrow-l" data-iconpos="right" class="ui-btn-right" data-mini="true" data-inline="true">Filtros</a>
			</div>

			<div data-role="content" id="principalcontent">

				<div id="profesion" data-role="fieldcontain">
					<label style="font-size: 14px;" for="puesto"><b>Profesión:</b></label>
					<input type="search" name="puesto" id="puesto" value="" data-mini="true" placeholder="Indica profesión" />
				</div>

				<div id="provincias" data-role="fieldcontain">
					<label style="font-size: 14px;" for="lugar" class="select" ><b>Provincia:</b></label>
					<select name="lugar" id="lugar" data-native-menu="false" data-mini="true" >
						<option value="SL">Todas las provincias</option>
						<option value="AC">A Coruña</option>
						<option value="AR">Álava/Araba</option>
						<option value="AB">Albacete</option>
						<option value="AL">Alicante/Alacant</option>
						<option value="AM">Almeria</option>
						<option value="AS">Asturias</option>
						<option value="AV">Ávila</option>
						<option value="BD">Badajoz</option>
						<option value="BC">Barcelona</option>
						<option value="BG">Burgos</option>
						<option value="CC">Caceres</option>
						<option value="CD">Cádiz</option>
						<option value="CT">Cantabria</option>
						<option value="CS">Castellón/Castelló</option>
						<option value="CE">Ceuta</option>
						<option value="CI">Ciudad Real</option>
						<option value="CO">Córdoba</option>
						<option value="CU">Cuenca</option>
						<option value="GI">Girona</option>
						<option value="GR">Granada</option>
						<option value="GU">Guadalajara</option>
						<option value="GP">Guipúzcoa/Gipuzkoa</option>
						<option value="HV">Huelva</option>
						<option value="HS">Huesca</option>
						<option value="IB">Illes Balears</option>
						<option value="JA">Jaén</option>
						<option value="LR">La Rioja</option>
						<option value="LP">Las Palmas</option>
						<option value="LE">León</option>
						<option value="LL">Lleida</option>
						<option value="LU">Lugo</option>
						<option value="MD">Madrid</option>
						<option value="MG">Málaga</option>
						<option value="ME">Melilla</option>
						<option value="MU">Murcia</option>
						<option value="NA">Navarra</option>
						<option value="OU">Ourense</option>
						<option value="PA">Palencia</option>
						<option value="PO">Pontevedra</option>
						<option value="SA">Salamanca</option>
						<option value="ST">Santa Cruz de Tenerife</option>
						<option value="SG">Segovia</option>
						<option value="SE">Sevilla</option>
						<option value="SO">Soria</option>
						<option value="TA">Tarragona</option>
						<option value="TE">Teruel</option>
						<option value="TO">Toledo</option>
						<option value="VA">Valencia/València</option>
						<option value="VL">Valladolid</option>
						<option value="VI">Vizcaya/Bizkaia</option>
						<option value="ZA">Zamora</option>
						<option value="ZG">Zaragoza</option>
					</select>
				</div>

				<div id="categoria" data-role="fieldcontain">
					<label style="font-size: 14px;" for="area" class="select"><b>Categoría de trabajo:</b></label>
					<select name="area" id="area" data-native-menu="false" data-mini="true">
						<option value="SL">Todas las categorías</option>
						<option value="AP">Administración pública</option>
						<option value="AE">Administración de empresas</option>
						<option value="AC">Atención a clientes</option>
						<option value="CP">Calidad, producción e I+D</option>
						<option value="CV">Comercial y ventas</option>
						<option value="CL">Compras, logística y almacen</option>
						<option value="CT">Contabilidad</option>
						<option value="DA">Diseño y artes gráficas</option>
						<option value="EF">Educación y formación</option>
						<option value="ES">Estudiantes</option>
						<option value="FB">Finanzas y banca</option>
						<option value="IN">Informática y telecomunicaciones</option>
						<option value="IT">Ingenieros y técnicos</option>
						<option value="IC">Inmobiliario y construcción</option>
						<option value="LE">Legal</option>
						<option value="MC">Marketing y comunicación</option>
						<option value="PA">Profesiones, artes y oficios</option>
						<option value="RH">Recursos humanos</option>
						<option value="SS">Sanidad y salud</option>
						<option value="TR">Turismo y restauración</option>
						<option value="VD">Ventas al detalle</option>
						<option value="OT">Otros</option>

					</select>
				</div>

				<fieldset data-role="controlgroup">
					<legend>
						<label style="font-size: 14px;"><b>Elige buscador:</b></label>
						<!--<b style="font-size: 14px;">Elige Buscador:</b> -->
					</legend>
					<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" data-mini="true">
					<label for="checkbox-h-2a">INFOJOBS</label>
					<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b" data-mini="true">
					<label for="checkbox-h-2b">IBEREMPLEOS</label>
					<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c" data-mini="true">
					<label for="checkbox-h-2c">JOB RAPIDO</label>
					<input type="checkbox" name="checkbox-h-2d" id="checkbox-h-2d" data-mini="true">
					<label for="checkbox-h-2d">JOB AND TALENT</label>
				</fieldset>

				<div data-role="fieldcontain">
					<!--<a id="initDB" href="#" data-role="button" data-mini="true">InitDB</a> -->
					<a id="buscar" href="#" data-role="button" data-mini="true">Buscar</a>
				</div>

			</div>

			<div data-role="footer" id="principalfooter">

				<h1> Proyecto Curso Multiplataforma</h1>
				<div>
					<p id="proceso"></p>
				</div>
			</div>

			<script>
				var formdata = {

				};
				$(document).ready(function() {

					$("#initDB").click(function() {
						initDB();
					});

					$("#buscar").click(function() {

						formdata.checkinfojobs = $("#checkbox-h-2a").is(":checked");
						formdata.checkiberempleos = $("#checkbox-h-2b").is(":checked");
						formdata.checkjobrapido = $("#checkbox-h-2c").is(":checked");
						formdata.checkJTalent = $("#checkbox-h-2d").is(":checked");

						if (!formdata.checkinfojobs 
							&& !formdata.checkiberempleos 
							&& !formdata.checkjobrapido 
							&& !formdata.checkJTalent) {
							alert("Debe seleccionar al menos un buscador de empleo!!!");
						} else {

							if (formdata.checkjobrapido == true) {
								$("#proceso").html("Buscando...");
								console.log("hola JobRAPIDO");
								var lug = textoprovincia($("#lugar").val());
								var profesion = $("#buscador").val();
								if ((lug == "" || lug == undefined) && (lug == "" || lug == undefined)) {
									alert("Para poder usar jobrápido hay que meter al menos el criterio de profesion y/o lugar");
									return;
								}
								parsearJobRapido(profesion, lug);
								console.log("?w=" + $("#puesto").val() + "&l=" + lug + "&r=auto&ft=1");
								console.log("acabado jobrapido");
							};
							if (formdata.checkiberempleos == true) {
								$("#proceso").html("Buscando...");
								console.log("hola IBEREMPLEOS");
								parsearIberempleos();
								console.log("acabado iberempleos");
							};
							if (formdata.checkJTalent == true) {
								$("#proceso").html("Buscando...");
								console.log("hola JOBANDTALENT");
								dameParserJobAndTalent();
								console.log("acabado jobs and talent");
							};
							if (formdata.checkinfojobs == true) {
								$("#proceso").html("Buscando...");
								console.log("hola INFOJOBS");
								parsearInfojobs();
								console.log("acabado INFOJOBS");
							};
						}

						//$.mobile.navigate("#pageResult");
					});
				});
			</script>
		</div>

		<!-- PAGINA DE FILTROS -->
		<div data-role="page" id="pagefiltros">

			<div data-role="header" id="filtroslheader">

				<a href="#pageprincipal" id ="botonvolver" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true">Volver</a>
				<h1> FILTROS ADICIONALES</h1>
			</div>

			<div data-role="content" id="filtroscontent">

				<form>
					<fieldset id ="experiencia" data-role="controlgroup" data-mini="true">
						<legend style="font-size: 14px; font-weight: bold;">
							Experiencia laboral
						</legend>

						<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked">
						<label for="radio-choice-1">Al menos 1 año</label>
						<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
						<label for="radio-choice-2">Al menos 2 años</label>
						<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
						<label for="radio-choice-3">De 3 a 5 años</label>
						<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4">
						<label for="radio-choice-4">No requerida</label>
					</fieldset>
				</form>
				<br/>

				</form>
				<fieldset id="estudios" data-role="controlgroup" data-mini="true">
					<legend style="font-size: 14px; font-weight: bold;">
						Estudios y formación
					</legend>
					<input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice-1" checked="checked">
					<label for="radio-choice-1">Formación Profesional</label>
					<input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice-2">
					<label for="radio-choice-2">Ingeniero Tecnico</label>
					<input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice-3">
					<label for="radio-choice-3">Licenciado-Arquitecto</label>
					<input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice-4">
					<label for="radio-choice-4">Sin estudios</label>
				</fieldset>
				</form>
				<br/>

				</form>
				<fieldset id="salario" data-role="controlgroup" data-mini="true">
					<legend style="font-size: 14px; font-weight: bold;">
						Salario
					</legend>
					<input type="radio" name="radio-choice-3" id="radio-choice-1" value="choice-1" checked="checked">
					<label for="radio-choice-1">Menos de 15.000 Euros</label>
					<input type="radio" name="radio-choice-3" id="radio-choice-2" value="choice-2">
					<label for="radio-choice-2">15.000 a 30.00 Euros</label>
					<input type="radio" name="radio-choice-3" id="radio-choice-3" value="choice-3">
					<label for="radio-choice-3">30.000 a 50.000 Euros</label>
					<input type="radio" name="radio-choice-3" id="radio-choice-4" value="choice-4">
					<label for="radio-choice-4">Mas de 50.000 Euros</label>
				</fieldset>
				</form>
				<br/>

				</form>
				<fieldset id="jornada" data-role="controlgroup" data-mini="true">
					<legend style="font-size: 14px; font-weight: bold;">
						Jornada
					</legend>
					<input type="radio" name="radio-choice-4" id="radio-choice-1" value="choice-1" checked="checked">
					<label for="radio-choice-1">Completa mañana y tarde</label>
					<input type="radio" name="radio-choice-4" id="radio-choice-2" value="choice-2">
					<label for="radio-choice-2">Solo Mañana</label>
					<input type="radio" name="radio-choice-4" id="radio-choice-3" value="choice-3">
					<label for="radio-choice-3">Intensiva Mañana</label>
					<input type="radio" name="radio-choice-4" id="radio-choice-4" value="choice-4">
					<label for="radio-choice-4">Indiferente</label>
				</fieldset>
				</form>
				<br/>

				</form>
				<fieldset id="contrato" data-role="controlgroup" data-mini="true">
					<legend style="font-size: 14px; font-weight: bold;">
						Tipo de contrato
					</legend>
					<input type="radio" name="radio-choice-5" id="radio-choice-1" value="choice-1" checked="checked">
					<label for="radio-choice-1">Indefinido</label>
					<input type="radio" name="radio-choice-5" id="radio-choice-2" value="choice-2">
					<label for="radio-choice-2">De duración determinada</label>
					<input type="radio" name="radio-choice-5" id="radio-choice-3" value="choice-3">
					<label for="radio-choice-3">Autónomo</label>
					<input type="radio" name="radio-choice-5" id="radio-choice-4" value="choice-4">
					<label for="radio-choice-4">Indiferente</label>
				</fieldset>
				</form>
				<script>
					$(document).ready(function() {

						$("#botonvolver").click(function() {
							actualizarfiltros();
						});
					});
				</script>
			</div>

			<div data-role="footer" id="principalfooter">

				<h1> Proyecto Final </h1>

			</div>
		</div>

		<!-- PAGINA DE RESULTADOS -->
		<div data-role="page" id="pageResult">

			<div data-role="header" id="resultHeader">

				<a href="#pageprincipal" id ="botonvolver" data-role="button" data-icon="arrow-l" data-iconpos="left" data-inline="true">Volver</a>
				<h1> Resultados de Búsqueda</h1>
			</div>

			<div data-role="content" id="resultContent">

				<div>

					<H6 id="contador">Trabajos encontrados: </H6>
					<ul id='listado' data-role='listview' data-inset='true' data-mini="true"></ul>
				</div>
				<script>
					var peticionespendientes = 0;
					function init() {
						$("#pasos").html("");
						console.log("No he pulsado todavia InitDB");
						initDB();
					}


					$(document).ready(function() {
						$("#btnRes").click(function() {
							initDB();
						});
						console.log("tamaño UL:" + $("#listado").length);
						if ($("#listado").length > 0) {
							$("#listado").listview("refresh");
						};

					});
				</script>
			</div>

			<div data-role="footer" id="principalfooter">

				<h1> Proyecto Final </h1>
				<button id="btnRes">
					Resetear DB
				</button>
				<h1>listado</h1>
			</div>

	</body>
</html>

